import React, { Component } from 'react'
import { Card, Button, Table, Form, Select, Modal, Radio,message } from 'antd'
import Utils from '../../utils/Utils'
import Axios from '../../axios'
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class City extends Component {
    state = {
        OpenCityVisible: false
    }
    params = {
        page: 1
    }
    componentDidMount() {
        this.requestList()
    }
    handleCity = () => {
        this.setState({
            OpenCityVisible: true
        })
    }
    handleOk = (e) => {
        const cityInfo = this.props.form.getFieldsValue();
        Axios.ajax({
            url: '/city/open',
            data: {
                params: cityInfo
            }
        }).then(res => {
            if (res.code == '0') {
                message.success('开通成功！')
                this.setState({
                    OpenCityVisible: false,
                });
                this.requestList()
            }
        })

    }

    handleCancel = (e) => {
        this.setState({
            OpenCityVisible: false,
        });
    }
    requestList = () => {
        let _this = this
        Axios.ajax({
            url: '/open_city',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then(res => {
            if (res.code == '0') {
                this.setState({
                    list: res.result.item_list,
                    pagination: Utils.pagination(res, (current => {
                        _this.params.page = current
                        this.requestList();
                    }))
                })
            }
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form
        const columns = [{
            title: '城市ID',
            dataIndex: 'id',
            key: 'id',
        }, {
            title: '城市名称',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '用车模式',
            dataIndex: 'mode',
            key: 'mode',
            render(mode) {
                return (mode == '1' ? '停车点' : '禁停区')
            }
        },
        {
            title: '营运模式',
            dataIndex: 'op_mode',
            key: 'op_mode',
            render(op_mode) {
                return (op_mode == '1' ? '自营' : '加盟')
            }
        }, {
            title: '授权加盟商',
            dataIndex: 'franchisee_name'
        }, {
            title: '城市管理员',
            dataIndex: 'city_admins',
            render(arr) {
                return arr.map((item) => {
                    return item.user_name;
                }).join(',');
            }
        }, {
            title: '城市开通时间',
            dataIndex: 'open_time'
        }, {
            title: '操作时间',
            dataIndex: 'update_time',
            render: Utils.formateDate
        }, {
            title: '操作人',
            dataIndex: 'sys_user_name'
        }]
        return (
            <div>
                <Card>
                    <CityForm />
                </Card>
                <Card>
                    <Button type="primary" onClick={this.handleCity}>开通城市</Button>
                    <Modal
                        title="提示"
                        visible={this.state.OpenCityVisible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                        <Form layout="horizontal">
                            <FormItem
                                label="选择城市"
                            >
                                {
                                    getFieldDecorator('select_city', {
                                        initialValue: '0'
                                    })(
                                        <Select style={{ width: 300 }}>
                                            <Option value="0">全部</Option>
                                            <Option value="1">上海</Option>
                                            <Option value="2">杭州</Option>
                                        </Select>
                                        )
                                }
                            </FormItem>
                            <FormItem
                                label="营运模式"
                            >
                                {
                                    getFieldDecorator('op_mode', {
                                        initialValue: '1'
                                    })(
                                        <RadioGroup>
                                            <Radio value='1'>自营</Radio>
                                            <Radio value='2'>加盟</Radio>
                                        </RadioGroup>
                                        )
                                }
                            </FormItem>
                            <FormItem
                                label="用车模式"
                            >
                                {
                                    getFieldDecorator('mode', {
                                        initialValue: '1'
                                    })(
                                        <RadioGroup>
                                            <Radio value='1'>指定停车点模式</Radio>
                                            <Radio value='2'>禁停区模式</Radio>
                                        </RadioGroup>
                                        )
                                }
                            </FormItem>
                        </Form>
                    </Modal>
                </Card>
                <Card>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                    />
                </Card>
            </div>

        )
    }
}
export default Form.create({})(City);

class CityForm extends Component {
    handleQuery = () => {
        console.log(this.props.form.getFieldsValue())
    }
    handleReset = () => {
        this.props.form.resetFields()
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Form layout="inline">
                    <FormItem
                        label="城市"
                    >
                        {
                            getFieldDecorator('city', {
                                initialValue: '0'
                            })(
                                <Select>
                                    <Option value="0">全部</Option>
                                    <Option value="1">上海</Option>
                                    <Option value="2">杭州</Option>
                                </Select>
                                )
                        }
                    </FormItem>
                    <FormItem
                        label="用车模式"
                    >
                        {
                            getFieldDecorator('mode', {
                                initialValue: '0'
                            })(
                                <Select style={{ width: 100 }}>
                                    <Option value="0">全部</Option>
                                    <Option value="1">指定停车模式</Option>
                                    <Option value="2">禁停区模式</Option>
                                </Select>
                                )
                        }
                    </FormItem>
                    <FormItem
                        label="加盟商授权状态"
                    >
                        {
                            getFieldDecorator('auth_status', {
                                initialValue: '0'
                            })(
                                <Select
                                    style={{ width: 140 }}
                                >
                                    <Option value="0">全部</Option>
                                    <Option value="1">已授权</Option>
                                    <Option value="2">未授权</Option>
                                </Select>
                                )
                        }
                    </FormItem>
                    <FormItem
                        label="营运模式"
                    >
                        {
                            getFieldDecorator('op_mode', {
                                initialValue: '0'
                            })(
                                <Select style={{ width: 100 }}>
                                    <Option value="0">全部</Option>
                                    <Option value="1">自营</Option>
                                    <Option value="2">加盟</Option>
                                </Select>
                                )
                        }
                    </FormItem>
                    <FormItem>
                        <Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleQuery}>查询</Button>
                        <Button onClick={this.handleReset}>重置</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

CityForm = Form.create({})(CityForm);